<script setup lang="ts">
import { onMounted, ref } from "vue";
import { showToast } from "vant";
import {
  apiRotaringPost,
  apiRotatingDelete,
  apirotatingGet,
} from "@/tool/request";
import Delete_button from "@/components/delete_button.vue";
import Upload_com from "@/components/upload_com.vue";

const rotatingList = ref<{ url: string; id: number }[]>([]);

const getList = () => {
  apirotatingGet().then((res) => {
    rotatingList.value = res.data;
  });
};
onMounted(() => {
  getList();
});

const deleteF = (id: number) => {
  apiRotatingDelete(id).then((res) => {
    showToast(res.data);
    getList();
  });
};
const shop_name = ref("");
const success = (url: string) => {
  apiRotaringPost(url).then((res) => {
    showToast(res.data);
    getList();
  });
};
</script>

<template>
  <div class="upload-page">
    <Upload_com @success="success" url=""  />
    <div>
      <van-field
        style="grid-area: b"
        v-model="shop_name"
        label="店铺名称"
        placeholder="请输入店铺名称"
      />
    </div>

    <div class="upload-list" style="grid-area: c" v-for="file in rotatingList">
      <van-image width="100%" :src="file.url" style="position: relative">
        <Delete_button
          style="position: absolute; right: 5px; top: 5px"
          @delete="deleteF(file.id)"
        />
      </van-image>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.upload-page {
  padding: 10px;
  display: grid;
  grid-template-areas: "a b" "c c";
  grid-template-columns: auto 1fr;
  align-items: last baseline;
}
</style>
